{%extends 'template.html'%}

{%block content%}
<div id="page-wrapper">
    <div class="row">
        <div class="col-lg-12">
            <h1 class="page-header">{{head.value}}</h1>
        </div>
    </div>
    <div class="row">
        <div class="col-lg-12">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <div class="btn-group">
                        <a><button id='bt-add' type="button" class="btn btn-primary">增加</button></a>
                        <a><button id='bt-del' type="button" class="btn btn-danger">删除</button></a>
                    </div>
                    <div class="pull-right">
                      <div class="btn-group">
                        <!-- <a><button type="button" class="btn btn-primary" data-toggle="modal" data-target="#Modal-file">导入</button></a> -->
                        <a href="/assets/export_accident"><button type="button" class="btn btn-primary">导出</button></a>
                      </div>
                    </div>
                </div>
                <div class="panel-body">
                      <table id="mytable" class="display" width="100%" cellspacing="0">
                          <thead>
                              <tr>
                                  <th class="center sorting_disabled">
                                    <label class="pos-rel">
                                      <input id='chb-all' type="checkbox"/>
                                    </label>
                                  </th>
                                  <th>故障序列号</th>
                                  <th>发生时间</th>
                                  <th>恢复时间</th>
                                  <th>故障类型</th>
                                  <th>故障说明</th>
                                  <th>是否处理</th>
                                  <th>硬件退还</th>
                                  <th>故障联系人</th>
                                  <th>服务器序列号</th>
                                  <th>备注</th>
                                  <th>操作</th>
                              </tr>
                          </thead>
                      </table>
                </div>
            </div>
        </div>
        <!-- Modal -->
        <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
          <div class="modal-dialog">
            <div class="modal-content">
              <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title" id="myModalLabel">添加新设备</h4>
              </div>
              <div class="modal-body">
                <div class="alert alert-danger alert-dismissable" id='modal-notify'>
                  <button type="button" class="close" id="bt-modal-notify">&times;</button>
                  <label id='lb-msg'></label>
                </div>
                <ul id="modal-list">
                  <li class="form-group" id='li_accident_number'>
                      <label class="col-sm-3 control-label">故障序列号</label>
                      <div class="col-sm-7">
                        <input type="text" class="form-control" placeholder="accident_number" id="accident_number">
                      </div>
                  </li>
                  <li class="form-group">
                      <label class="col-sm-3 control-label">发生时间</label>
                      <div class="col-sm-7">
                        <input type="text" class="form-control " placeholder="2015-01-02" id="occur_time">
                      </div>
                  </li>
                  <li class="form-group">
                      <label class="col-sm-3 control-label">恢复时间</label>
                      <div class="col-sm-7">
                        <input type="text" class="form-control" placeholder="2015-01-01" id="recover_time">
                      </div>
                  </li>
                  <li class="form-group">
                      <label class="col-sm-3 control-label">故障类型</label>
                      <div class="col-sm-7">
                        <select id="accident_type" style="width: 100%">
                          <option value="硬件" class="selected">硬件</option>
                          <option value="软件">软件</option>
                        </select>
                      </div>
                  </li>
                  <li class="form-group">
                      <label class="col-sm-3 control-label">故障说明</label>
                      <div class="col-sm-7">
                        <input type="text" class="form-control" placeholder="accident_reason" id="accident_reason">
                      </div>
                  </li>
                  <li class="form-group">
                      <label class="col-sm-3 control-label">是否处理</label>
                      <div class="col-sm-7">
                        <select id="dispose" style="width: 100%">
                          <option value="未处理" class="selected">未处理</option>
                          <option value="处理中">处理中</option>
                          <option value="已处理">已处理</option>
                        </select>
                      </div>
                  </li>
                  <li class="form-group">
                      <label class="col-sm-3 control-label">硬件退还</label>
                      <div class="col-sm-7">
                        <select id="sendback_hardware" style="width: 100%">
                          <option value="未退还" class="selected">未退还</option>
                          <option value="已退还">已退还</option>
                          <option value="无须退还">无须退还</option>
                        </select>
                      </div>
                  </li>
                  <li class="form-group">
                      <label class="col-sm-3 control-label">故障联系人</label>
                      <div class="col-sm-7">
                        <input type="text" class="form-control" placeholder="linkman" id="linkman">
                      </div>
                  </li>
                  <li class="form-group">
                      <label class="col-sm-3 control-label">服务器序列号</label>
                      <div class="col-sm-7">
                        <select id="server" class="form-control" multiple="multiple" style="width:100%">
                        </select>
                      </div>
                  </li>
                  <li class="form-group">
                      <label class="col-sm-3 control-label">备注</label>
                      <div class="col-sm-7">
                        <input type="text" class="form-control" placeholder="note" id="note">
                      </div>
                  </li>
                </ul>
              </div>
              <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button id='bt-save' type="button" class="btn btn-primary">保存</button>
              </div>
            </div><!-- /.modal-content -->
          </div><!-- /.modal-dialog -->
        </div><!-- /.modal -->
        <div class="modal fade" id="Modal-file" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                  <div class="modal-dialog">
            <div class="modal-content">
              <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title" id="myModalLabel">导入/导出</h4>
              </div>
              <div class="modal-body">
                <div class="form-group">
                  <label for="exampleInputFile">File input</label>
                  <input type="file" id="exampleInputFile">
                  <p class="help-block">Example block-level help text here.</p>
                </div>
              </div>
              <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button id='file-save' type="button" class="btn btn-primary">保存</button>
              </div>
            </div><!-- /.modal-content -->
          </div><!-- /.modal-dialog -->
        </div>
    </div>
</div>
{%endblock%}
{%block bodyjs%}
    <script src="/static/js/jquery.dataTables.js" ></script>
    <script src="/static/js/zebra_datepicker.js"></script>
    {{ django_context_varable }}
    {% verbatim %}
    <script id="tpl" type="text/x-handlebars-template">
          {{#each func}}
          <button type="button" class="btn btn-{{this.type}} btn-sm" onclick="{{this.fn}}">{{this.name}}</button>
          {{/each}}
    </script>
    {% endverbatim %}
    <script src="/static/js/handlebars-v3.0.1.js"></script>
    <script src="/static/js/accident.js"></script>
{%endblock%}
{%block css%}
<link href="/static/css/jquery.dataTables.css" rel="stylesheet" type="text/css">
<link href="/static/css/mycss.css" rel="stylesheet" type="text/css">
<link href="/static/css/datetimepicker.css" rel="stylesheet" type="text/css">
{%endblock%}
